<template>
  <div class="home-mainnav-container">
    <div class="home-mainnav-item" v-for="(item, index) in mainNavItems" :key="index" 
    @click="handleClick(index)">
      <img :src="item.icons" alt="">
      <span>{{item.lab}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      mainNavItems:[{
        icons:require('@/assets/icons/icon1.png'),
        lab:'HR面试',
      },{
        icons:require('@/assets/icons/icon2.png'),
        lab:'笔试',
      },{
        icons:require('@/assets/icons/icon3.png'),
        lab:'技术面试',
      },{
        icons:require('@/assets/icons/icon4.png'),
        lab:'模拟面试',
      },{
        icons:require('@/assets/icons/icon5.png'),
        lab:'面试技巧',
      },{
        icons:require('@/assets/icons/icon6.png'),
        lab:'薪资查询',
      }],
    }
  },
  methods:{
    //当点击了某一行的时候
    handleClick(index){
      console.log('点击了'+ index + '区域');
    },
  }
}
</script>

<style lang="less" scoped>
.home-mainnav-container{
  width: 100%;
  height: 100%;
  background-color: #fff;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;

  .home-mainnav-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.33%;
    height: 118px;

    img{
      width: 58px;
      height: 58px;
    }

    span{
      font-size: 16px;
      margin-top: 5px;
    }
  }
}
</style>